<template>
    <div class="wh-full">
        <div class="wh-full pr" style="z-index:1">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card shadow="always" body-style="padding: 10px;padding-bottom: 20px;" class="mt20 br10 pdl10 pr">
                        <img class="img" src="../../assets/img/bzxt_car_databg.png" />
                        <div class="title">车辆数据</div>
                        <p class="special fwb">VEHICLE DATA</p>
                        <div class="bgCard mt1c mb10">
                            <div class="date flex flex-jc-center mt10 mb1c"><img style="height: 32%;" class="pdl10 pdr10" src="../../assets/img/bzxt_car_time.png" />2020年7月22日 星期三</div>
                            <p class="pdr totalTip">统计数据时间截至到2020年7月21日23:59:59</p>
                        </div>
                        <div class="flex mt7c mb10 flex-jc-sa">
                            <div class="flex flex-col flex-center vehicle">
                                <div class="circle" id="main"><looper :percentNum="67"/></div><p class="tips">5分钟内在线数量</p><p class="total">5523</p>
                            </div>
                            <div class="flex flex-col flex-center vehicle">
                                <p class="circle" id="maina"><looper :percentNum="25" :color="'#1DCAC2'"/></p><p class="tips">全国预警事件数</p><p class="total">36</p>
                            </div>
                            <div class="flex flex-col flex-center vehicle">
                                <p class="circle" id="mainb"><looper :percentNum="45" :color="'#8140EB'"/></p><p class="tips">当前受灾车辆</p><p class="total">125</p>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="always" body-style="padding: 10px;padding-bottom: 20px;" class="mt20 br10 pdl10 pdr10">
                        <div class="title">预警车辆推送</div>
                        <p class="translateTotal fwb">{{total}}</p>
                        <div class="flex lineSty">
                            <p :style="{'width': (appPushNums/(appPushNums+smsPushNums+telPushNums))*100+'%', 'background-image': 'linear-gradient('+'90deg, '+'#FCD57E, '+'#F7AB48)'}"></p>
                            <p :style="{'width': (smsPushNums/(appPushNums+smsPushNums+telPushNums))*100+'%', 'background-image': 'linear-gradient('+'90deg, '+ '#B774F7, '+'#8140EB)'}"></p>
                            <p :style="{'width': (telPushNums/(appPushNums+smsPushNums+telPushNums))*100+'%', 'background-image': 'linear-gradient('+'90deg, '+ '#1DCAC2, '+'#40EBBE)'}"></p>
                        </div>
                        <div class="flex flex-col pushList">
                            <div class="flex flex-row flex-ai-center"><img src="../../assets/img/bzxt_car_send1.png" /><p class="flex1">App推送量</p><p class="pushTotal">{{appPushNums}}</p></div>
                            <div class="flex flex-row flex-ai-center"><img src="../../assets/img/bzxt_car_send2.png" /><p class="flex1">短信推送量</p><p class="pushTotal">{{smsPushNums}}</p></div>
                            <div class="flex flex-row flex-ai-center"><img src="../../assets/img/bzxt_car_send3.png" /><p class="flex1">回拨电话量</p><p class="pushTotal">{{telPushNums}}</p></div>
                        </div>
                        <div class="flex ml2c" style="margin-top: 3.5%;">
                            <div><img src="../../assets/img/bzxt_car_message.png" /></div>
                            <div class="flex-col pushChat">
                                <p>推送消息已读</p>
                                <p class="chatTotal fwb">790</p>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="always" body-style="padding: 10px;padding-bottom: 20px;" class="mt20 br10 pdl10">
                        <div class="title">避灾车辆通知</div>
                        <div class="flex flex-col mb3c popCar">
                            <div class="flex flex-col carPush carPushSty">
                                <div class="flex flex-ai-center">
                                    <p class="carPushTip flex1">挪车确认单</p><p class="carPushTotal">35</p>
                                </div>
                                <div class="lineLabel1"></div>
                            </div>
                            <div class="flex flex-col carPush">
                                <div class="flex flex-ai-center">
                                    <p class="carPushTip flex1">奖励金领取通知</p><p class="carPushTotal">12</p>
                                </div>
                                <div class="lineLabel2"></div>
                            </div>
                            <div class="flex flex-col carPush">
                                <div class="flex flex-ai-center">
                                    <p class="carPushTip flex1">奖励金领取</p><p class="carPushTotal">8</p>
                                </div>
                                <div class="lineLabel3"></div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <div class="title ml20 mb20">保险统计</div>
            <div class="pdl10">
                <div class="flex" style="margin: 1% 1% 0 1%;">
                    <div class="flex depot">
                        <div class="flex flex-ai-center"><img src="../../assets/img/bzxt_car_ygbx.png" /></div>
                        <div class="flex flex-col ml10">
                            <p class="depotTotal">130,892</p>
                            <p class="depotTip mt2 fs14">已购保险车辆</p>
                        </div>
                    </div>
                    <div class="flex depot ml7c flex1">
                        <div class="flex flex-ai-center"><img src="../../assets/img/bxtj_car_yxbx.png" /></div>
                        <div class="flex flex-col ml10">
                            <div class="flex">
                                <p class="depotTotal">93,721</p>
                                <div class="flex flex-col ml10" style="align-self: center;">
                                    <p class="depotTip">今日新增  23</p>
                                    <p class="depotTip">本月新增  484</p>
                                </div>
                            </div>
                            <p class="depotTip mt2 fs14">有效保单数量</p>
                        </div>
                    </div>
                    <div class="flex mr4c">
                        <el-radio-group v-model="radio" @change="changes">
                            <el-radio-button label="月新增"></el-radio-button>
                            <el-radio-button label="年新增"></el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
                <div id="main5" style="height: 400px;"></div>
            </div>
            <el-row :gutter="20">
                <el-col :span="18">
                    <el-card shadow="always" body-style="padding: 10px;padding-bottom: 20px;" class="br10 pdl10 pr">
                        <div class="title">各保险公司车辆有效保单统计</div>
                        <div id="main8" style="width: 100%;height: 320px;"></div>
                    </el-card>
                </el-col>
                <el-col :span="6">
                    <el-card shadow="always" body-style="padding: 10px;" class="br10 pdl10 pr">
                        <div class="title">受灾车辆区域统计</div>
                        <div class="rankSty flex flex-col mt20">
                            <div class="flex-row topTips flex flex-jc-sa"> <p>排名</p><p>城市</p><p>受灾车辆数</p></div>
                            <div class="ranklist flex flex-col">
                                <div class="item flex flex-row flex-jc-sa">
                                    <div class="flex flex-jc-center"><p class="no">1</p></div><div>北京</div><div>56483</div>
                                </div>
                                <div class="item flex flex-row flex-jc-sa">
                                    <div class="flex flex-jc-center"><p class="no">2</p></div><div>上海</div><div>45683</div>
                                </div>
                                <div class="item flex flex-row flex-jc-sa">
                                    <div class="flex flex-jc-center"><p class="no">3</p></div><div>深圳</div><div>35683</div>
                                </div>
                                <div class="item flex flex-row flex-jc-sa">
                                    <div class="flex flex-jc-center"><p class="no">4</p></div><div>成都</div><div>25683</div>
                                </div>
                                <div class="item flex flex-row flex-jc-sa">
                                    <div class="flex flex-jc-center"><p class="no">5</p></div><div>武汉</div><div>15683</div>
                                </div>
                                <div class="item flex flex-row flex-jc-sa">
                                    <div class="flex flex-jc-center"><p class="no">6</p></div><div>南京</div><div>5683</div>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="bg wh-full"></div>
    </div>
</template>

<script>
import echarts from 'echarts';
import looper from '../../components/looper';
export default {
    name: "OperationsPanel",
    components: {
        looper
    },
    data() {
        return {
            radio: '月新增',
            appPushNums: 592,
            smsPushNums: 518,
            telPushNums: 282,
        };
    },
    created() {
    },
    watch: {
    },
    computed:{
        total(){
            return this.$translate(this.appPushNums+this.smsPushNums+this.telPushNums)
        }
    },
    mounted() {
        var self = this;
        // getChart1  ---> 在线数量环形图 
        // self.getChart1();
        // self.getChart1a();
        // self.getChart1b();
        // getChart5  ---> 保险统计 
        self.getChart5(1);
        // getChart8  ---> 各保险公司车辆有效保单统计 
        self.getChart8();
    },
    methods: {
        getChart1(){
            var myChart = echarts.init(document.getElementById('main')); 
            var option = {
                animation: false,
                series: [
                    {
                        type: 'pie',
                        radius: ['90%', '95%'],
                        avoidLabelOverlap: false,
                        color: ["#F7AB48", "#C1C1C9"],
                        label: {
                            show: true,
                            position: 'center',
                            fontSize: 10,
                            color: '#000000',
                            rich:{
                                'fz': {
                                    fontSize: 18,
                                    fontFamily: 'DINAlternate-Bold',
                                    color: '#3C3A6F'
                                }  
                            },
                            formatter: function(v){
                                return '{fz|' + v.data.spareField + '}%'
                            }
                        },
                        data: [
                            {value: 1350, name: "总人数", spareField: 66},
                            {value: 1010, name: "在线人数", spareField: 66},
                        ]
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize",function(){ myChart.resize(); });
        },
        getChart1a(){
            var myChart = echarts.init(document.getElementById('maina')); 
            var option = {
                animation: false,
                series: [
                    {
                        type: 'pie',
                        radius: ['90%', '98%'],
                        avoidLabelOverlap: false,
                        color: [ "#1DCAC2", "#C1C1C9"],
                        label: {
                            show: true,
                            position: 'center',
                            fontSize: 10,
                            color: '#000000',
                            rich:{
                                'fz': {
                                    fontSize: 18,
                                    fontFamily: 'DINAlternate-Bold',
                                    color: '#3C3A6F'
                                }  
                            },
                            formatter: function(v){
                                return '{fz|' + v.data.spareField + '}%'
                            }
                        },
                        data: [
                            {value: 250, name: "全国预警事件数", spareField: 25},
                            {value: 750, name: "总预警数", spareField: 25},
                        ]
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize",function(){ myChart.resize(); });
        },
        getChart1b(){
            var myChart = echarts.init(document.getElementById('mainb')); 
            var option = {
                animation: false,
                series: [
                    {
                        type: 'pie',
                        radius: ['90%', '98%'],
                        avoidLabelOverlap: false,
                        color: [ "#8140EB", "#C1C1C9"],
                        label: {
                            show: true,
                            position: 'center',
                            fontSize: 10,
                            color: '#000000',
                            rich:{
                                'fz': {
                                    fontSize: 18,
                                    fontFamily: 'DINAlternate-Bold',
                                    color: '#3C3A6F'
                                }  
                            },
                            formatter: function(v){
                                return '{fz|' + v.data.spareField + '}%'
                            }
                        },
                        data: [
                            {value: 450, name: "当前受灾车辆数", spareField: 45},
                            {value: 550, name: "全国受灾车辆数", spareField: 45}
                        ]
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize",function(){ myChart.resize(); });
        },
        getChart2(){
            var myChart2 = echarts.init(document.getElementById('main2'));
            var option2 = {
                xAxis: {
                    type: 'category',
                    show: false,
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value',
                    show: false,
                    boundaryGap: [0, '30%']
                },
                grid:{
                    y2: 100,
                },
                title: {    
                    subtext: '主动避险车辆数（ 本年 ）',
                    left: '5%',
                    subtextStyle: {
                        color: '#3C3A6F',
                        fontSize: 14
                    }
                },
                visualMap: {
                    type: 'piecewise',
                    show: false,
                    dimension: 0,
                    seriesIndex: 0,
                    pieces: [{
                        gt: 0,
                        lt: 100,
                        color: 'rgba(202,232,252, 0.7)'
                    }]
                },
                series: [
                    {
                        type: 'line',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#F3A556',
                            width: 4
                        },
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#F3A556'
                                }, {
                                    offset: 1, color: 'rgba(240,133,76,0.05)'
                                }]
                            }
                        },
                        data: [
                            ['2019-10-10', 90],
                            ['2019-10-11', 300],
                            ['2019-10-12', 230],
                            ['2019-10-13', 330],
                            ['2019-10-14', 250],
                            ['2019-10-15', 260],
                        ]
                    }
                ]
            };
            myChart2.setOption(option2);
            window.addEventListener("resize",function(){ myChart2.resize(); });
        },
        getChart5(m){
            var m = m, xdata = 0, d1 = [], d2 = []; //d1 x轴name d2 data
            if(m){
                m = new Date().getMonth() + 1;
                xdata = this.mGetDate(new Date().getFullYear(), m);
                for (const i of xdata) { d1.push(i.name); d2.push(i.value); }
            }else{
                d1 = ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];
                d2 = [1452,1522,964,843,1323,1253,1723,1023,678,956,674,1823];
            }
            var myChart5 = echarts.init(document.getElementById('main5'));
            // console.log(xdata)
            // var sData = 
            var option5 = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: d1,
                    axisLine: { show:true, lineStyle:{ color: '#BBBBBB' } },
                    axisTick: { show:false }
                },
                yAxis:{
                    splitNumber: 4,
                    show:true,
                    axisLine: { show:false,lineStyle:{color: '#BBBBBB'} },
                    axisTick: { show:false },
                    splitLine:{ show:true, lineStyle:{color: '#D5D5D5'} },
                    
                },
                grid: {
                    left: '2%',
                    right: '5%',
                    top: '15%',
                    bottom: '8%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                series: [
                    {
                        data: d2,
                        type: 'line',
                        name: '保单数',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#F19651',
                            width: 4
                        },
                        color: '#F19651',
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(240,133,76,0.85)'
                                }, {
                                    offset: 1, color: 'rgba(240,133,76,0.05)'
                                }]
                            }
                        }
                    }
                ]
            };
            myChart5.setOption(option5);
            window.addEventListener("resize",function(){ myChart5.resize(); });
        },
        getChart8(d){
            if(!d){
                d = [
                    ['product', '阳光保险', '中国平安保险', '太平洋保险', '中国人保', '阳光保险1', '中国平安保险1', '太平洋保险1', '中国人保1', '阳光保险2', '中国平安保险2',],
                    ['保单数', 380, 720, 500, 300, 900, 600, 800, 780, 598, 777]
                ];
            }
            var myChart8 = echarts.init(document.getElementById('main8'));
            var option8 = {
                color:'#F7AB48',
                legend: { show: false, data: '保单数' },
                tooltip: {},
                dataset: { source: d },
                xAxis: [
                    {type: 'category',axisLine: { show:false, lineStyle:{ color: '#BBBBBB' } },axisTick: {show:false}}
                ],
                yAxis: [
                    {splitNumber: 4,show:true,axisLine: {show:false, lineStyle:{ color: '#BBBBBB' }},axisTick: {show:false},
                        splitLine:{ show:false }
                    }
                ],
                grid: [
                    {bottom: '10%',top: '15%',left: '5%',right: '4%'}
                ],
                itemStyle: {
                    barBorderRadius: [30, 30, 0, 0]
                },
                series: [
                    {type: 'bar', barGap: '50%', barWidth: '25%', seriesLayoutBy: 'row', itemStyle:{ color: '#F7AB48' } }
                ]
            };
            myChart8.setOption(option8);
            window.addEventListener("resize",function(){ myChart8.resize(); });
        },
        changes(val) {
            let that = this 
            switch (val) {
                case '月新增':
                    that.getChart5(1);
                    break;
                case '年新增':
                    that.getChart5();
                    break;
            }
        },
        mGetDate(y, m){   //y-year  m-month  根据传入的年月计算当前月份的天数并返回指定格式
            var d = new Date(y, m, 0);
            var len = d.getDate();
            var arr = [];
            for(var i = 0; i < len; i++ ){
                let str = m + "-" + (i + 1);
                let array = {
                    "name": str,
                    "value": Math.round(Math.random()*2000 + 1500)
                }
                arr.push(array);
            }
            return arr;
        },
    },
};
</script>

<style scoped lang="scss">
    .bg{background: url(../../assets/img/bzxt_bg.png) repeat 100% 100%;position: fixed;top: 9%;left: 0;}
    .title{color: #3C3A6F;font-size: 18px;line-height: 24px;font-family: 'MicrosoftYaHei';font-weight: bold;padding-left: 4px;padding-top: 5px;}
    .special{font-family: 'MicrosoftYaHei';font-size: 12px;line-height: 12px;color: #F7AB48;opacity: 0.8;padding-left: 4px;margin-top: 5px;}
    .bgCard{width: 300px;text-align: center;}
    .bgCard,.img{position: absolute;right: 0;top: 0;}
    .bgCard .totalTip{opacity: 0.5;}
    .bgCard .date{font-family: 'MicrosoftYaHei';font-weight: bold;color: #3C3A6F;font-size: 16px;line-height: 21px;z-index: 940522;}

    .vehicle .tips{font-size: 12px;opacity: 0.5;font-family: 'MicrosoftYaHei';color: #5E5D73;margin: 10% 0;}
    .vehicle .total{font-size: 24px;font-family: 'DINPro';color: #3C3A6F;font-weight: bold;}
    .vehicle .circle{width: 65px;height: 65px;}

    .translateTotal{font-family: 'DINPro-Bold';font-size: 24px;color: #3C3A6F;text-align: right;}
    .lineSty{width: 98%;height: 8px;margin-left: 2%;margin-top: 5%;}
    .lineSty p:nth-of-type(1){border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
    .lineSty p:nth-of-type(2){margin: 0 1%;}
    .lineSty p:nth-of-type(3){border-top-right-radius: 8px;border-bottom-right-radius: 8px;}
    .pushList{margin-top: 5%;font-size: 14px;font-family: 'MicrosoftYaHei';color: #3C3A6F;margin-right: 2%;margin-left: 2%;}
    .pushList> div:first-child{line-height: 23px;}
    .pushList .pushTotal{font-family: 'DINPro-Medium';opacity: 1;color: #3C3A6F;font-weight: bold;}
    .pushList .flex{margin-top: 1%;}
    .pushList .flex1{opacity: 0.5;margin-left: 2%;}
    .pushList img{height: 10px;padding-top: 2.5px;}

    .pushChat{margin-left: 5%;}
    .pushChat>p{opacity: 0.6;font-family: 'MicrosoftYaHei';font-size: 12px;color: #3C3A6F;}
    .pushChat .chatTotal{font-size: 24px;font-family: 'DINPro-Medium';opacity: 1;color: #3C3A6F;line-height: 38px;}

    .carPush div:first-child{margin: 5% 20% 1% 1%;line-height: 30px;}
    .popCar .carPush:nth-of-type(2) div:first-child{margin: 5% 35% 1% 1%;}
    .popCar .carPush:nth-of-type(3) div:first-child{margin: 5% 50% 1% 1%;}
    .carPushSty div:first-child{margin: 38px 20% 1% 1%;}
    .popCar .carPush:nth-of-type(2){margin-right: 10%;margin-bottom: 1%;}
    .popCar .carPush:nth-of-type(3){margin-right: 20%;margin-bottom: 1%;}
    .carPush .carPushTip{opacity: 0.5;font-family: 'MicrosoftYaHei';font-size: 14px;color: #3C3A6F;}
    .carPush .carPushTotal{font-family: 'DINPro-Bold';font-weight: bold;color: #3C3A6F;font-size: 14px;line-height: 25px;}
    .carPush .lineLabel1,.carPush .lineLabel2,.carPush .lineLabel3{height: 8px;border-radius: 4px;}
    .carPush .lineLabel1{background: #F7AB48;animation: line1Ani 1s linear;width: 80%;}
    .carPush .lineLabel2{background: #B06DF5;animation: line2Ani 1s linear;width: 65%;}
    .carPush .lineLabel3{background: #1DCAC2;animation: line3Ani 1s linear;width: 45%;}
    @keyframes line1Ani { 0%{width: 0%;} 100%{width: 80%;} }
    @keyframes line2Ani { 0%{width: 0%;} 100%{width: 65%;} }
    @keyframes line3Ani { 0%{width: 0%;} 100%{width: 45%;} }

    .depotTotal{font-family: 'DINPro-Bold';font-weight: bold;color: #3C3A6F;font-size: 36px;}
    .depotTip{opacity: 0.5;font-family: 'MicrosoftYaHei';font-size: 12px;color: #686786;}
    .depot img{width: 30px;height: 30px;margin-top: -50%;}




    .rankSty{width: 105%;font-size: 14px;font-family: 'MicrosoftYaHei';text-align: center;margin-left: -11%;}
    .rankSty .topTips{color: #3C3A6F;font-weight: bold;font-size: 14px;}
        .rankSty div,
        .rankSty .topTips p{flex: 1;}
    .rankSty .ranklist{color: #686786;padding-bottom: 20px;}
        .rankSty .ranklist .item{padding: 12px 0;}
        .rankSty .ranklist .item:nth-last-child(1){border-bottom: none;padding-bottom: 0px;}
        .rankSty .ranklist .item:first-child{border-bottom: none;padding-top: 28px;}
        .rankSty .ranklist .item .no{border-radius: 50%;overflow: hidden;background-color: rgba(47,46,70,0.10);color: #3C3A6F;width: 20px;height: 20px;line-height: 20px;font-weight: bold;}
        .rankSty .ranklist .item:nth-of-type(1) .no,
        .rankSty .ranklist .item:nth-of-type(2) .no,
        .rankSty .ranklist .item:nth-of-type(3) .no{background-color: #F7AB48;color: #FFFFFF;}






    .card{height: 100%;width: 18%;border-radius: 8px;}
    .card .total{font-family: 'DINPro';font-size: 40px;color: #FFF;font-weight: bold;padding-top: 18%;padding-left: 10%;}
    .card .tips{font-family: 'PingFangSC-Semibold';font-size: 12px;color: #FFFFFF;letter-spacing: 0;line-height: 10px;padding-left: 10%;}
    .card span{font-size: 25px;}
    .card img{padding-left: 5px;}

    .label {top: 27%;right: 23%;}
    .label img{width: 30px;height: 30px;padding: 5px 10px;}
    .label .txt{color: #3C3A6F;font-size: 50px;font-family: "DINPro";font-weight: bold;}

    .radioGroup{top: 18%; left: 3%;}

</style>
